<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>节点操作</title>
    <!-- 引入 Bootstrap 3.3.6 CSS -->
    <link rel="stylesheet" href="../static/css/bootstrap.min.css">
</head>
<body>
    <div class="container">
        <h1 class="text-center">节点操作</h1>
        <div class="text-center">
            <button class="btn btn-primary" onclick="showModal('add')">添加节点</button>
            <button class="btn btn-success" onclick="showModal('relationship')">添加关系</button>
            <button class="btn btn-danger" onclick="showModal('delete')">删除节点</button>
        </div>
    </div>

    <!-- 模态框 -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">操作</h4>
                </div>
                <div class="modal-body">
                    <form id="dynamic-form">
                        <!-- 节点名称 -->
                        <div class="form-group">
                            <label for="node-name-input">节点名称</label>
                            <input type="text" class="form-control" id="node-name-input" placeholder="请输入节点名称">
                        </div>
                        <!-- 节点类型 -->
                        <div class="form-group hidden" id="node-type-group">
                            <label for="node-type-input">节点类型</label>
                            <input type="text" class="form-control" id="node-type-input" placeholder="请输入节点类型">
                        </div>
                        <!-- 第二个节点名称 -->
                        <div class="form-group hidden" id="relation-group">
                            <label for="node-name-input2">目标节点名称</label>
                            <input type="text" class="form-control" id="node-name-input2" placeholder="请输入目标节点名称">
                        </div>
                        <!-- 关系名称 -->
                        <div class="form-group hidden" id="relation-name-group">
                            <label for="node-relation-input">关系名称</label>
                            <input type="text" class="form-control" id="node-relation-input" placeholder="请输入关系名称">
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" onclick="submitForm()">提交</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 引入 jQuery 2.2.4 和 Bootstrap 3.3.6 JS -->
    <script src="../static/js/jquery-2.2.4.min.js"></script>
    <script src="../static/js/bootstrap.min.js"></script>

    <script>
        // 显示模态框并根据操作动态调整表单
        function showModal(action) {
            $('#myModal').data('action', action); // 存储当前操作类型
            
            // 重置表单
            $('#dynamic-form')[0].reset();

            // 根据操作类型显示或隐藏输入框
            if (action === 'add') {
                $('#node-type-group').removeClass('hidden'); // 显示节点类型输入框
                $('#relation-group, #relation-name-group').addClass('hidden'); // 隐藏关系相关输入框
                $('#myModalLabel').text('添加节点');
            } else if (action === 'relationship') {
                $('#relation-group, #relation-name-group').removeClass('hidden'); // 显示关系相关输入框
                $('#node-type-group').addClass('hidden'); // 隐藏节点类型输入框
                $('#myModalLabel').text('添加关系');
            } else if (action === 'delete') {
                $('#node-type-group, #relation-group, #relation-name-group').addClass('hidden'); // 隐藏所有多余输入框
                $('#myModalLabel').text('删除节点');
            }

            // 显示模态框
            $('#myModal').modal('show');
        }

        // 提交表单
        function submitForm() {
            var action = $('#myModal').data('action'); // 获取当前操作类型

            if (action === "add") {
                const node_name = $("#node-name-input").val();
                const node_type = $("#node-type-input").val();

                fetch("http://127.0.0.1:5000/add_node", {
                    method: "POST",
                    headers: {
                        "Content-Type": "application/json"
                    },
                    body: JSON.stringify({ node_name: node_name, node_type: node_type })
                })
                .then(response => {
                    if (!response.ok) {
                        throw new Error("节点添加失败！");
                    }
                    return response.json();
                })
                .then(data => {
                    alert(data.message);
                    location.reload();
                })
                .catch(error => {
                    alert(error.message || "节点添加失败！");
                    console.error("Error adding node:", error);
                });
            } else if (action === "relationship") {
                const node_name = $("#node-name-input").val();
                const node2_name = $("#node-name-input2").val();
                const relation_name = $("#node-relation-input").val();

                fetch("http://127.0.0.1:5000/add_relationship", {
                    method: "POST",
                    headers: {
                        "Content-Type": "application/json"
                    },
                    body: JSON.stringify({ node_name: node_name, node2_name: node2_name, relation_name: relation_name })
                })
                .then(response => {
                    if (!response.ok) {
                        throw new Error("关系添加失败！");
                    }
                    return response.json();
                })
                .then(data => {
                    alert(data.message);
                })
                .catch(error => {
                    alert(error.message);
                });
            } else if (action === "delete") {
                const node_name = $("#node-name-input").val();

                fetch('http://127.0.0.1:5000/delete_node', {
                    method: "POST",
                    headers: {
                        "Content-Type": "application/json"
                    },
                    body: JSON.stringify({ node_name: node_name })
                })
                .then(response => {
                    if (!response.ok) {
                        throw new Error("节点删除失败！");
                    }
                    return response.json();
                })
                .then(data => {
                    alert(data.message);
                    location.reload();
                })
                .catch(error => {
                    alert(error.message || "节点删除失败！");
                    console.error("Error deleting node:", error);
                });
            }
        }
    </script>
</body>
</html>